import { ElIcon, ElMessage, ElTable, ElTableColumn, ElTag } from "element-plus";
import c from "./index.module.scss";
import {
  defineComponent,
  onMounted,
  ref,
  watchEffect,
  watch,
  computed,
} from "vue";
import IconMap from "@/config/sideNavIconMap";
import Sortable from "sortablejs";
import { getGroupListApi } from "@/api/modules/own";

export default defineComponent({
  name: "mainFooter",
  setup() {
    const tableData = ref<any>([]);
    const handleSelectionChange = () => {
      console.log("1111");
    };
    // ProTable 实例
    const proTable = ref();
    // // 表格拖拽排序
    // const sortTable = ({
    //   newIndex,
    //   oldIndex,
    // }: {
    //   newIndex?: number;
    //   oldIndex?: number;
    // }) => {
    //   console.log(newIndex, oldIndex);
    //   console.log(proTable.value?.tableData);
    //   ElMessage.success("修改列表排序成功");
    // };

    // 拖拽排序
    const dragSort = () => {
      const tbody = document.querySelector(
        ".el-table__body-wrapper tbody"
      ) as HTMLElement;
      Sortable.create(tbody, {
        handle: ".move",
        animation: 300,
        onEnd({ newIndex, oldIndex }) {
          console.log("新", newIndex);
          console.log("旧", oldIndex);
          const [removedItem] = tableData.value.splice(oldIndex!, 1);
          console.log("removedItem", removedItem);
          tableData.value.splice(newIndex, 0, removedItem);
          console.log("99999", tableData.value);
        },
      });
    };

    const getGroupList = async () => {
      try {
        const res = await getGroupListApi();
        tableData.value = res;
        console.log(tableData.value);
      } catch (e) {}
    };
    onMounted(() => {
      // dragSort();
      // getGroupList();
    });

    return () => {
      return (
        <div class={c.upload}>
          <ElTable
            ref="multipleTableRef"
            data={tableData.value}
            style="width: 100%"
            selection-change={handleSelectionChange}
            border
          >
            <ElTableColumn type="selection" width="55" align="center" />
            <ElTableColumn
              onDargSort={dragSort}
              type="sort"
              label="Sort"
              width="60"
              v-slots={{
                default: () => {
                  return (
                    <ElTag class="move">
                      <ElIcon> {IconMap["DCaret"]}</ElIcon>
                    </ElTag>
                  );
                },
              }}
            />
            <ElTableColumn
              prop="groupId"
              label="Id"
              width="120"
            ></ElTableColumn>
            <ElTableColumn prop="saveName" label="Name" />
          </ElTable>
        </div>
      );
    };
  },
});
